<!-- 任务责任人管理 -->
<template>
  <div class="task_owner">
    <Table ref="TableHeight" :columns="columns" :data="data" :height="700"></Table>
    <!-- 设置任务责任人 -->
    <Modal
      v-model="setModalFlag"
      title="设置"
      @on-cancel="AllModalCancel"
      width="500px"
      :footerHide="true">
      <Form ref="formValidate" :model="formValidate" :label-width="200">
        <Row :gutter="16">
          <Col span="22">
            <FormItem label="任务名称：">
              <span style="color:#333">
                <!-- {{ $formatter.switchName('TaskLeader', formValidate.taskType) }} -->
                {{ currentRow.configName }}
              </span>
            </FormItem>
          </Col>
          <div class="tips" v-if="pointLeaderListLength > 1">
            <Icon type="md-alert" class="tips_icon" color="#FAAD14" />
            {{
              `该任务需设置${pointLeaderListLength}个“任务责任人”，需分别设置`
            }}
          </div>
        </Row>
        <Row
          :gutter="16"
          v-for="(item, index) in currentRow.pointLeaderList"
          :key="index">
          <Col span="22">
            <div>
              <div>
                任务责任人 {{ pointLeaderListLength > 1 ? index + 1 : '' }}
              </div>
              <div class="tips">
                <Icon
                  type="md-alert"
                  class="tips_icon"
                  color="#FAAD14"
                  v-if="pointLeaderListLength > 0" />
                该“任务责任人”所对应的角色包括：
                  <span style="color:#333">{{item.rolesName}}</span>
                。您可从当前案场中所有具有该角色的人员中选择1名人员，作为“任务责任人”
              </div>
            </div>
            <FormItem :label="`任务责任人：`">
              <Select v-model="item.userId" placeholder="请选择">
                <Option
                  v-for="option in item.zeList"
                  :value="option.userId"
                  :key="option.userId"
                  :label="option.userName" />
                <!-- @click.native="changeSelect(item, index, option)" /> -->
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="flex flex-horizontal-end btn-operate">
        <Button @click="AllModalCancel">取消</Button>
        <Button type="primary" @click="submitFun()" style="margin-left: 8px">
          保存
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import teamsApi from '@/biz/buildingManagement/teams'
  import sopApi from '@/biz/buildingManagement/sopConfig'
  export default {
    data() {
      return {
        columns: [
          {
            title: '任务类型',
            key: 'configName',
            minWidth: 140,
            align: 'center'
          },
          {
            title: '任务负责人',
            key: 'leaderName',
            minWidth: 120,
            align: 'center'
          },
          {
            title: '操作',
            key: 'operation',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h(
                  'a',
                  {
                    style: {
                      marginLeft: '10px'
                    },
                    on: {
                      click: (e) => {
                        e.stopPropagation()
                        this.setUp(params.row) //点击事件
                      }
                    }
                  },
                  '设置'
                )
              ])
            }
          }
        ],
        data: [],
        formValidate: {},
        setModalFlag: false,
        housesId: '',
        currentRow: {},
        pointLeaderListLength: 0
      }
    },
    methods: {
      // 查询楼盘任务负责人
      getTaskLeader() {
        sopApi.sopGetTaskLeader({ buildingId: this.housesId }).then((res) => {
          this.data = res
        })
      },
      optionalLeader(val) {
        let roleIds = []
        val.forEach((item) => {
          roleIds.push(item.roleId)
        })
        let params = {
          buildingId: this.housesId,
          roleIds: roleIds
        }
        return sopApi
          .optionalLeader(params)
          .then((res) => {
            return res
          })
          .catch(() => {})
      },
      setUp(row) {
        this.currentRow = JSON.parse(JSON.stringify(row))
        if (!this.currentRow.pointLeaderList.length) {
          return this.$Message.warning('暂无可配置人员')
        }
        this.pointLeaderListLength = this.currentRow.pointLeaderList.length
        this.setModalFlag = true
        this.currentRow.pointLeaderList.forEach((item) => {
          if (item.roles && item.roles.length) {
            this.optionalLeader(item.roles).then((res) => {
              this.$set(item, 'zeList', res)
            })
            let orr = []
            item.roles.forEach((rItem) => {
              orr.push(rItem.roleName)
            })
            item.rolesName = orr.join(',')
          }
        })
      },
      AllModalCancel() {
        this.currentRow = {}
        this.setModalFlag = false
      },
      submitFun() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          configId: this.currentRow.configId,
          taskLeaders: this.currentRow.pointLeaderList
        }
        sopApi
          .sopSetTaskLeader(params)
          .then((res) => {
            this.$Message.success('设置成功!')
            this.setModalFlag = false
            this.getTaskLeader()
          })
          .catch(() => {})
      }
    },
    created() {
      this.housesId = this.$dt.buildInfo().housesId
    },
    mounted() {
      this.getTaskLeader()
    }
  }
</script>
<style lang="scss" scoped>
  .task_owner {
  }
  .tips {
    background: rgb(254, 252, 236);
    display: block;
    width: 100%;
    padding: 5px;
    margin: 0 auto 20px;

    .tips_icon {
      font-size: 20px;
      color: #0f42a7;
      vertical-align: sub;
    }
  }
</style>
